<!-- 我的钱包页面 -->
<template>
	<view class="my-money-box">
		<!-- 顶部的收益信息区域 -->
		<view class="profit-box">
			<view class="profit-money-box">
				<text class="small-text">总收益(元)</text>
				<view class="money-box">
					<text class="money-size">{{moneyData.balance | toFixed2 }}</text>
					<view class="out-money-btn" @click="outMoney">提现</view>
				</view>
			</view>
			<view class="profit-item-box">
				<view class="item-box" @click="goToRecommend(1)">
					<text class="small-text">今日推荐(人)</text>
					<text>{{moneyData.today_invite || 0}}</text>
				</view>
				<view class="item-box">
					<text class="small-text">今日收益(元)</text>
					<text>{{moneyData.today_income | toFixed2 }}</text>
				</view>
				<view class="item-box">
					<text class="small-text" @click="goToRecommend(2)">总推荐(人)</text>
					<text>{{moneyData.total_invite || 0}}</text>
				</view>
				<view class="item-box">
					<text class="small-text" @click="goToRecommend(3)">律师入驻</text>
					<text>{{moneyData.total_lawyer || 0}}</text>
				</view>
			</view>
		</view>
		<!-- 邀请记录信息区域 -->
		<block v-for="item in invitationDataList" :key="item.id">
			<view class="invitation-item-box">
				<view class="left-box">
					<text>{{ item.type }}</text>
					<text class="time">{{ item.create_time }}</text>
				</view>
				<view class="right-box">
					<text>{{ item.num > 0 ? ('+' + item.num) : (item.num) }}</text>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 获取金额变更记录的数据筛选条件
			sortData: {
				page: 1,
				page_size: 10,
			},
			// 钱包基本信息数据对象
			moneyData: {},
			// 金额数据变更记录列表
			invitationDataList: [],
		};
	},
	onLoad() {
		this.getData()
		this.getLawyerScoreChangeList()
	},
	onShow() {
		// 如果 vuex_isSubmit 为 true 了 则这个页面需要刷新了
		if(this.vuex_isSubmit) {
			this.sortData.page = 1
			this.invitationDataList = []
			this.getData()
			this.getLawyerScoreChangeList()
			this.$u.vuex('vuex_isSubmit', false)
		}
	},
	async onPullDownRefresh() {
		this.sortData.page = 1
		this.invitationDataList = []
		await this.getData()
		await this.getLawyerScoreChangeList()
		uni.stopPullDownRefresh()
		this.$u.toast('页面数据已刷新')
	},
	onReachBottom() {
		this.sortData.page += 1
		this.getLawyerScoreChangeList()
	},
	methods: {
		// 获取钱包基本信息
		async getData() {
			const res = await this.$u.api.getBalanceInfo()
			if(!res) return
			this.moneyData = res
			// console.log('钱包基本信息',this.moneyData);
		},
		// 获取金额变更记录
		async getLawyerScoreChangeList() {
			const res = await this.$u.api.getBalanceChangeList(this.sortData)
			if(!res) return
			if(res.length < 1) return this.sortData.page = this.sortData.page < 2 ? 1 : (this.sortData.page - 1)
			this.invitationDataList = [...this.invitationDataList, ...res]
			// console.log(this.invitationDataList);
		},
		// 今日推荐、总推荐、律师入驻三个区块的共享的点击事件
		goToRecommend(index) {
			console.log(index);
			// 判断点击的是哪个区块
			if(index === 1) {	// 1 代表 今日推荐
				this.$u.route({
					type: 'to',
					url: '/myPackageA/pages/views/recommends',
					params: {index: index}
				})
			} else if (index === 2) {	// 2 代表 总推荐
			this.$u.route({
				type: 'to',
				url: '/myPackageA/pages/views/recommends',
				params: {index: index}
			})
				
			} else {	// 不是 1 和 2 则为 3 则表示点了 律师入驻
			this.$u.route({
				type: 'to',
				url: '/myPackageA/pages/views/recommends',
				params: {index: index}
			})
				
			}
		},
		// 提现
		outMoney() {
			// 跳转到提现页面
			this.$u.route(`/myPackageA/pages/views/out-money?type=1&money=${this.moneyData.balance}&rate=${this.moneyData.rate}`)
		}
	},
	filters: {
		toFixed2(money) {
			if(!money) return 0.00
			return parseFloat(money).toFixed(2)
		}
	}
};
</script>

<style lang="scss" scoped>
.my-money-box {
	width: 750rpx;
	min-height: 100vh;
	padding: 0 30rpx 30rpx;
	.profit-box {
		height: 366rpx;
		background: linear-gradient(135deg, #00ead1, #00c9b1);
		border-radius: 15px;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #ffffff;
		line-height: 42rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 31rpx 26rpx;
		.profit-money-box {
			.money-box {
				display: flex;
				justify-content: space-between;
				.money-size {
					font-size: 66rpx;
				}
				.out-money-btn {
					width: 172rpx;
					height: 60rpx;
					background: #99eee4;
					border-radius: 30rpx;
					line-height: 60rpx;
					text-align: center;
					font-size: 36rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #ffffff;
				}
			}
		}
	}
	.profit-item-box {
		width: 100%;
		display: flex;
		.item-box {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
}
.small-text {
	font-size: 24rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #ffffff;
	line-height: 70rpx;
	opacity: 0.8;
}
.invitation-item-box {
	margin-top: 33rpx;
	height: 128rpx;
	padding: 20rpx 27rpx;
	background-color: white;
	box-shadow: 0 0 16rpx 0 #f0f1f6;
	border-radius: 8rpx;
	display: flex;
	justify-content: space-between;
	.left-box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #000000;
		.time {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;
		}
	}
	.right-box {
		display: flex;
		justify-content: center;
		align-items: center;
		color: $u-text-color;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
	}
}
</style>
